<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Beehive</title>
    <!-- css顺序会影响布局 -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/beeui.css}">
    <link rel="stylesheet" th:href="@{/beehive/css/main.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/beehive/css/theme.css}">

    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>



</head>
<body>

<!-- 应用公共头部 -->
<header th:replace="~{common :: header}"></header>

<!-- 导航条 -->
<nav th:replace="common :: commonNav"></nav>


<!--中间内容区-->
<div class="box clear">
    <div class="con left" style="width: 100%">
        <div class="position">
            <span >当前位置：&#32;</span>
            <a th:href="@{/index.html}" class="grey"> 蜂巢书屋 </a>
            <span>&#32;>&#32;</span>
            <span>[[${themeName}]]</span>
            <span class="layui-badge layui-bg-blue" style="float:right;">共：[[${bookList.total}]]条</span>
        </div>
        <ul class="con_list clear">
            <li class="ease" th:each="book : ${bookList.records}">
                <a th:href="@{/detail(id = ${book.id})}">
                    <img th:src="${book.img == null} ? '/img/default_book.png' : ${#strings.replace(book.img,'d:/bms/book','/path')}">
                </a>
                <p class="s_n">
                    <a th:href="@{/detail(id = ${book.id})}">
                        [[${#strings.length(book.title)} > 12 ? ${#strings.substring(book.title,0, 10)} + '……' : ${book.title}]]
                    </a>
                </p>
            </li>
        </ul>
        <!--列表内容-->

        <ul class="page clear" th:if="${bookList.pages != 1}">
            <li><a th:href="@{'/theme/' + ${themeId}}">首页</a></li>
            <li><a th:href="@{'/theme/' + ${themeId}(pn=${bookList.current} - 1)}">上一页</a></li>
            <li th:each="num : ${#numbers.sequence(1, bookList.pages)}">
                <a th:href="@{'/theme/' + ${themeId}(pn = ${num})}"
                   th:class="${num == bookList.current ? 'thispage' : ''}">
                    [[${num}]]
                </a>
            </li>
            <li><a th:href="@{'/theme/' + ${themeId}(pn = ${bookList.current} + 1)}">下一页</a></li>
            <li><a th:href="@{'/theme/' + ${themeId}(pn = ${bookList.pages})}">尾页</a></li>
            <li class="tz">
                <select id="pageNum">
                    <option th:each="num : ${#numbers.sequence(1, bookList.pages)}"
                            th:value="${num}"
                            th:selected="${num == bookList.current}"
                            th:text="${num}">
                    </option>
                </select>
                <a onclick="jumpTo()">跳转</a>
            </li>
            <li>当前第 [[${bookList.current}]] 页 总计 [[${bookList.pages}]] 页</li>
        </ul>

    </div>

</div>


<footer th:replace="common :: commonFooter"></footer>

<script th:inline="javascript">

    function jumpTo() {
        let appUrl = [[@{/theme/}]];
        let themeId = [[${themeId}]];
        let pageNum = $("#pageNum").val();
        console.log(appUrl);
        console.log(themeId);
        console.log(pageNum);
        location.href = appUrl + themeId + '?pn=' + pageNum;
    }
</script>

</body>
</html>